<template>
	<u-gap height="200"></u-gap>
	
	<view class="u-page">
		<u-toast ref="uToast"></u-toast>
		<u-cell-group title-bg-color="rgb(243, 244, 246)">
			<u-cell
				:titleStyle="{fontWeight: 500}"
				:title="item.title"
				v-for="(item, index) in list"
				:key="index"
				isLink
				:icon="item.iconUrl"
				@click="showToast(item)"
			>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{
					type: 'default',
					title: '收藏',
					message: "收藏",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				},
				{
					type: 'warning',
					position: "top",
					title: '收藏',
					message: "收藏",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
				},
				{
					type: 'loading',
					title: '客服中心',
					message: "客服中心",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				}
			],
		}
	},
	computed: {
		getIcon() {
			return path => {
				return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
			}
		}, 
	},
	methods: {

	}
}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>